var jcrop_api;

var registerUploadWindowButtonOnclickHandler = function() {
	var layover= document.getElementById('layover');
	layover.style.display = 'block';
	$($('#upload-form-container').children()[1]).hide();
	event.stopPropagation();
};

var registerFakeButtonOnchangeHandler = function() {
	document.getElementById('file-path').setAttribute('value', this.value);
	readURL(this);
};

var registerFakeButtonOnmousedownHandler = function() {
	document.getElementById('upload-button').style.background = 
		'-webkit-gradient(linear, left top, left bottom, from(#307a10), to(#76d74c) )';
};

var registerFakeButtonOnmouseupHandler = function() {
	document.getElementById('upload-button').style.background = 
		'-webkit-gradient(linear, left top, left bottom, from(#76d74c), to(#307a10) )';
};

var registerMainUploadOnclickHandler = function(event) {
	event.stopPropagation();
};

var readURL = function(input) {
	if (input.files && input.files[0]) {
		var reader = new FileReader();
		reader.onload = function (e) {
			$('#image-container').show();
			if(jcrop_api) {
				jcrop_api.destroy();
			}
			$('#new-photo').width('');
			$('#new-photo').height('');
			$('#new-photo').load(function() {
				var maxWidth = 600;
				var maxHeight = 600;
				var w = $('#new-photo').width();
				var h = $('#new-photo').height();
				var width, height;
				if (w / h > maxWidth / maxHeight) {
					width = maxWidth;
					height = width * h / w;
				} else {
					height = maxHeight;
					width = height * w / h;				
				}
				$('#new-photo').width(width);
				$('#new-photo').height(height);
				console.log(width + ',' + height);
				setTimeout(function(){
					jcrop_api = $.Jcrop('#new-photo');
					jcrop_api.setOptions({ aspectRatio: 3/4 });
				}, 200);
			});
			$('#new-photo').attr('src', e.target.result);
		};
		reader.readAsDataURL(input.files[0]);
	}
};

window.onload = function() {
	var uploadWindowButton = document.getElementById('upload-window-button');
	uploadWindowButton.onclick = registerUploadWindowButtonOnclickHandler;
	var fakeButton = document.getElementById("upload-button-fake");
	fakeButton.onchange = registerFakeButtonOnchangeHandler;
	fakeButton.onmousedown = registerFakeButtonOnmousedownHandler;
	fakeButton.onmouseup = registerFakeButtonOnmouseupHandler;
	fakeButton.onmouseout = registerFakeButtonOnmouseupHandler;
	var mainUpload = document.getElementById('upload-form-main');
	mainUpload.onclick = registerMainUploadOnclickHandler;
	document.onclick = function() {
		var layover= document.getElementById('layover');
		layover.style.display = 'none';
	};
	$('#upload-form').submit(function() {
		var bounds = jcrop_api.tellSelect();
		$('#width').val(bounds.w);
		$('#height').val(bounds.h);
		$('#x').val(bounds.x);
		$('#y').val(bounds.y);
	});
	$('#image-container').hide();
	var photos = $('#photo-table').find('img');
	for (var i = 0; i < photos.length; ++i) {
		var siblings = $(photos[i]).parent().siblings();
		var width = $(photos[i]).width();
		for (var j =0; j < 2; ++j) {
			$(siblings[j]).width(width);
		}
	}
	var moveButtons = $('.move-top-button');
	for (var i = 0; i < moveButtons.length; ++i) {
		$(moveButtons[i]).click(function() {
			$('#top-rank').val($(this).val());
			$('#top-form').submit();
		});
	}
	var deleteButtons = $('.delete-button');
	for (var i = 0; i < deleteButtons.length; ++i) {
		$(deleteButtons[i]).click(function() {
			$('#delete-rank').val($(this).val());
			$('#delete-form').submit();
		});
	}
};